<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { spaceRankAnalyzeUsingPost, spaceSizeAnalyzeUsingPost } from '@/api/analyzeController.ts'
import { message } from 'ant-design-vue'
import VChart from 'vue-echarts'
import 'echarts'
import { formatSize } from '@/utils'

const space = ref<API.Space[]>([])

interface Props {
  //空间 ID
  spaceId: string
  //是否查询公共图库
  queryPublic: boolean
  //全空间分析
  queryAll: boolean
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

async function spaceRankAnalyze() {
  const resp = await spaceRankAnalyzeUsingPost({
    spaceId: props?.spaceId,
    queryPublic: props?.queryPublic,
    queryAll: props?.queryAll,
    topN:10,
  })
  if (resp.data.code === 0 && resp.data.data) {
    space.value = resp.data.data
  } else {
    message.error(resp.data.message)
  }
}

const options = computed(() => {
  return {
    title: {
      text: '',
      left: 'left',
    },
    xAxis: {
      type: 'category',
      data: space.value.map((item) => item.spaceName),
    },
    yAxis: {
      type: 'value',
      name: '空间使用量 (MB)',
      // 格式化 y 轴标签，将 KB 转换为 MB 显示
      axisLabel: {
        formatter: (value) => {
          return formatSize(value)
        },
      },
    },
    series: [
      {
        name: '空间使用量',
        type: 'bar',
        data: space.value.map((item) => item.totalSize),
        itemStyle: {
          color: '#4895ef', // 柱状图颜色，可根据需求调整
        },
      },
    ],
    tooltip: {
      trigger: 'axis',  // 格式化提示框内容
      formatter: function(params) {
        // params是包含当前数据的数组，取第一个元素（单个系列时）
        const data = params[0];
        // 原始值（假设单位为KB）
        const rawSize = data.value;
        // 转换为MB并保留两位小数
        const sizeInMB = formatSize(rawSize);
        // 拼接提示内容（系列名 + 空间名 + 格式化后的大小）
        return `${data.seriesName}<br/>${data.name}: ${sizeInMB}`;
      }
    }

  }
})

watchEffect(() => {
  spaceRankAnalyze()
})
</script>

<template>
  <!--  管理员统计占用存储最多的N个空间-->
  <div id="spaceRankAnalyze">
    <a-card style="height: 320px" title="空间使用排行分析">
      <v-chart :option="options" style="height: 300px" />
    </a-card>
  </div>
</template>

<style scoped></style>
